<template>
  <div class="timeline">
    <div class="item">
        <div class="time"></div>
    </div>
    <div class="item" v-for="item in timeList" :key='item.id'>
      <div class="time">{{item.time}}</div>
      <div class="right-box">
          <div class="line-box start-line" v-if="item.start">
          <!-- <img :src="item.photo" alt="" /> -->
          <div class="line"></div>
        </div>
         <div class="line-box node-line" v-else-if="item.node">
          <div class="node">{{item.nodeText}}</div>
          <div class="line"></div>
        </div>
        <div class="line-box" v-else>
          <!-- <img :src="getCircleType(item.circleType)" alt="" /> -->
          <div class="line"></div>
        </div>
        <div class="content" v-if="item.time">
          <div class="title">
            <span class="name">{{item.name}}</span>
            <div class="btns">
                <div v-for="btn in item.btnType" :key='btn'>
                <span class="btn info" v-if="btn == 1">提示</span>
                <span class="btn warn" v-if="btn == 2">严重</span>
                <span class="btn normal" v-if="btn == 3">查看</span>
                </div>
            </div>
          </div>
          <div class="info">
              <span class="info-text">{{item.content}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
        timeList:[
            // {
            //     start:true,
            //     time:"",
            //     photo:require('@/assets/images/user.png')
            // },
            {
                time:'1小时前',
                circleType:1,
                name:'人员变更',
                content:'当前版本暂不支持更换个人模板，下版本将 增添此功能，如有需要，请各自调整绑定',
                btnType:[]
            },
            {
                time:'2021.06.01 12:26:31',
                circleType:2,
                name:'变更',
                content:'当前版本暂不支持更换个人模板，下版本将',
                btnType:[1,2]
            },
             {
                time:'2021.05.15 08:55:01',
                circleType:3,
                name:'信息',
                content:'当前版本暂不支持更换个人模板，下版本将',
                btnType:[3]
            },
             {
                time:'2021.04.20 09:00:01',
                circleType:4,
                name:'变更',
                content:'当前版本暂不支持更换个人模板，下版本将',
                btnType:[]
            },
            {
                node:true,
                time:"",
                nodeText:2020
            },
                         {
                time:'2021.04.20 09:00:01',
                circleType:4,
                name:'变更',
                content:'当前版本暂不支持更换个人模板，下版本将',
                btnType:[]
            },
        ]
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
      getCircleType(type){
        //   let defaultType =require('@/assets/images/circle-blue.png')
        //   let list=[
            //   {type:1,icon:require('@/assets/images/circle-blue.png')},
            //   {type:2,icon:require('@/assets/images/circle-yellow.png')},
            //   {type:3,icon:require('@/assets/images/circle-red.png')},
            //   {type:4,icon:require('@/assets/images/circle-green.png')},
        //   ]
    //       let result=list.find(el=>el.type==type);
    //       if(result) return result.icon
    //       else return defaultType
      }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.timeline {
  .item {
    display: flex;
    .time {
      font-size: 18px;
      font-weight: 500;
      color: #888888;
      width: 92px;
      word-break: break-all;
      text-align: right;
      margin-top: -5px;
    }
  }
  .right-box{
      position: relative;
      display: flex;
      width: 75%;
      .line-box{
          height: 100%;
          display: flex;
          align-items: center;
          flex-direction: column;
           margin: 0 10px;
          .line{
              width: 2px;
              height: 100%;
              background: #EEEEEE;
          }
      }
      .start-line{
          height: 120px;
          margin-left: -22px;
          img{
              width: 80px;
              height: 80px;
              border-radius: 50%;
          }
      }
       .node-line{
          height: 100px;
           margin-left: -8px;
          .node{
              width: 50px;
              height: 50px;
              border-radius: 50%;
              font-size: 18px;
              text-align: center;
              line-height: 50px;
              color: #FFFFFF;
              background: #5864EE;
          }
      }
      .content{
          margin-bottom: 30px;
          margin-top: -7px;
         .title{
             display: flex;
             align-items: center;
             padding-bottom: 20px;
             .name{
                font-size: 20px;
                font-weight: 500;
                color: #333333;
             }
             .btns{
                 display: flex;
                 align-items: center;
                 .btn{
                     margin-left: 10px;
                     font-size: 18px;
                    font-weight: 500;
                    color: #FFFFFF;
                    padding: 3px 20px;
                    box-shadow: 0px 2px 10px 0px rgba(250, 178, 68, 0.57);
                    border-radius: 13px;
                 }
                 .warn{
                     background: #FD6666;
                 }
                  .info{
                     background: #FAB244;
                 }
                  .normal{
                     background:  #538AFF;
                 }
             }
         } 
         .info{
             background: #F7F7F7;
            border-radius: 5px;
            padding: 20px;
            .info-text{
                font-size: 18px;
                font-weight: 500;
                color: #999999;
            }
         }
      }
  }
}
</style>
